<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI问诊助手 - 实时语音转文字与诊断建议系统</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        .transcript-entry {
            transition: background-color 0.3s;
        }
        .transcript-entry.doctor {
            border-left: 4px solid #3b82f6;
        }
        .transcript-entry.patient {
            border-left: 4px solid #10b981;
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .record-card {
            transition: all 0.3s ease;
        }
        .record-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .ai-insight {
            border-left: 4px solid #8b5cf6;
        }
        .diagnosis-suggestion {
            border-left: 4px solid #0ea5e9;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="flex h-screen">
        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm">
                <div class="flex justify-between items-center px-6 py-3">
                    <div>
                        <h1 class="text-xl font-semibold text-gray-800">AI问诊助手 - 实时语音转文字与诊断建议系统</h1>
                        <p class="text-sm text-gray-500">通过实时语音监听转文字分析医生与患者沟通，自动生成问诊记录并提供诊断建议</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button id="new-consultation" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i class="fas fa-plus mr-2"></i>新建问诊
                        </button>
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold">医</div>
                            <span class="ml-2 text-gray-700">医生</span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 主要内容 -->
            <main class="flex-1 overflow-y-auto p-6">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 语音识别与转录区域 -->
                    <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-xl font-semibold text-gray-800">实时语音转文字</h2>
                            <div class="flex space-x-2">
                                <button id="record-btn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center pulse">
                                    <i class="fas fa-microphone mr-2"></i>开始录音
                                </button>
                                <button id="simulate-btn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
                                    <i class="fas fa-play mr-2"></i>模拟问诊
                                </button>
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
                                    <i class="fas fa-cog mr-2"></i>设置
                                </button>
                            </div>
                        </div>

                        <div class="bg-gray-100 rounded-lg p-4 h-96 overflow-y-auto mb-4" id="transcript-container">
                            <div class="text-center text-gray-500 py-10">
                                <i class="fas fa-microphone-alt text-3xl mb-3"></i>
                                <p>点击"开始录音"或"模拟问诊"开始AI辅助问诊</p>
                                <p class="text-xs mt-2 text-blue-500"><a href="voice-recognition-troubleshooting.md" target="_blank">语音识别问题？查看故障排除指南</a></p>
                            </div>
                        </div>

                        <div class="flex justify-between items-center">
                            <div class="text-sm text-gray-500">
                                <span>语音识别准确率: <span id="accuracy-rate">-</span></span>
                            </div>
                            <div class="flex space-x-2">
                                <button class="text-gray-600 hover:text-gray-800">
                                    <i class="fas fa-pause"></i> 暂停
                                </button>
                                <button class="text-gray-600 hover:text-gray-800">
                                    <i class="fas fa-redo"></i> 重新开始
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 关键信息提取与AI分析区域 -->
                    <div class="space-y-6">
                        <div class="bg-white rounded-xl shadow-md p-6">
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">关键信息提取</h2>
                            <div id="key-info" class="space-y-3">
                                <div class="text-center text-gray-500 py-4">
                                    <i class="fas fa-info-circle text-2xl mb-2"></i>
                                    <p>等待问诊对话分析结果</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-md p-6">
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">AI智能分析</h2>
                            <div id="ai-analysis" class="space-y-3">
                                <div class="text-center text-gray-500 py-4">
                                    <i class="fas fa-brain text-2xl mb-2"></i>
                                    <p>等待AI分析结果</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 问诊记录与诊断建议区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
                    <!-- 问诊记录 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-2xl font-semibold text-gray-800 mb-4">问诊记录</h2>
                        <div id="consultation-record" class="border border-gray-200 rounded-lg p-4 h-80 overflow-y-auto">
                            <div class="text-center text-gray-500 py-10">
                                <i class="fas fa-file-medical text-3xl mb-3"></i>
                                <p>问诊记录将在此处生成</p>
                            </div>
                        </div>
                        <div class="mt-4 flex justify-end">
                            <button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center">
                                <i class="fas fa-save mr-2"></i>保存记录
                            </button>
                        </div>
                    </div>

                    <!-- 诊断建议 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-2xl font-semibold text-gray-800 mb-4">诊断建议</h2>
                        <div id="diagnosis-suggestions" class="border border-gray-200 rounded-lg p-4 h-80 overflow-y-auto">
                            <div class="text-center text-gray-500 py-10">
                                <i class="fas fa-stethoscope text-3xl mb-3"></i>
                                <p>AI诊断建议将在此处生成</p>
                            </div>
                        </div>
                        <div class="mt-4 flex justify-end">
                            <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
                                <i class="fas fa-print mr-2"></i>打印建议
                            </button>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const recordBtn = document.getElementById('record-btn');
            const simulateBtn = document.getElementById('simulate-btn');
            const transcriptContainer = document.getElementById('transcript-container');
            const keyInfo = document.getElementById('key-info');
            const aiAnalysis = document.getElementById('ai-analysis');
            const consultationRecord = document.getElementById('consultation-record');
            const diagnosisSuggestions = document.getElementById('diagnosis-suggestions');
            
            // 语音识别状态
            let isRecording = false;
            
            // 模拟问诊对话数据
            const mockDialog = [
                { speaker: 'doctor', text: '您好，请问您哪里不舒服？' },
                { speaker: 'patient', text: '医生，我最近总是感觉头晕，有时候还会恶心。' },
                { speaker: 'doctor', text: '这种情况持续多长时间了？' },
                { speaker: 'patient', text: '大概有两周了，特别是早上起床的时候更严重。' },
                { speaker: 'doctor', text: '有没有其他症状？比如视力模糊或者耳鸣？' },
                { speaker: 'patient', text: '有耳鸣，尤其是右耳。' },
                { speaker: 'doctor', text: '您最近有没有熬夜或者工作压力大？' },
                { speaker: 'patient', text: '是的，最近工作比较忙，经常熬夜。' },
                { speaker: 'doctor', text: '我先给您量一下血压，然后可能需要做一些检查。' }
            ];
            
            // 开始/停止录音按钮事件
            recordBtn.addEventListener('click', function() {
                isRecording = !isRecording;
                if (isRecording) {
                    recordBtn.innerHTML = '<i class="fas fa-stop mr-2"></i>停止录音';
                    recordBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
                    recordBtn.classList.add('bg-gray-500', 'hover:bg-gray-600');
                    startRecording();
                } else {
                    recordBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i>开始录音';
                    recordBtn.classList.remove('bg-gray-500', 'hover:bg-gray-600');
                    recordBtn.classList.add('bg-red-500', 'hover:bg-red-600');
                    stopRecording();
                }
            });
            
            // 模拟问诊按钮事件
            simulateBtn.addEventListener('click', function() {
                simulateBtn.disabled = true;
                simulateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>模拟中...';
                simulateConsultation();
            });
            
            // 开始录音函数
            function startRecording() {
                // 清空转录容器
                transcriptContainer.innerHTML = '';
                
                // 添加提示信息
                const infoDiv = document.createElement('div');
                infoDiv.className = 'text-center text-gray-500 py-10';
                infoDiv.innerHTML = '<i class="fas fa-microphone text-3xl mb-3"></i><p>正在录音中...请开始说话</p>';
                transcriptContainer.appendChild(infoDiv);
                
                // 模拟录音过程
                setTimeout(() => {
                    // 移除提示信息
                    transcriptContainer.innerHTML = '';
                    
                    // 添加录音中的视觉反馈
                    const recordingDiv = document.createElement('div');
                    recordingDiv.className = 'text-center text-gray-500 py-10';
                    recordingDiv.innerHTML = '<i class="fas fa-microphone text-3xl mb-3 pulse"></i><p>正在录音中...请开始说话</p>';
                    transcriptContainer.appendChild(recordingDiv);
                }, 1000);
            }
            
            // 停止录音函数
            function stopRecording() {
                // 显示录音已停止
                transcriptContainer.innerHTML = '<div class="text-center text-gray-500 py-10"><i class="fas fa-check-circle text-3xl mb-3 text-green-500"></i><p>录音已停止</p></div>';
            }
            
            // 模拟问诊过程
            function simulateConsultation() {
                // 清空所有区域
                transcriptContainer.innerHTML = '';
                keyInfo.innerHTML = '';
                aiAnalysis.innerHTML = '';
                consultationRecord.innerHTML = '';
                diagnosisSuggestions.innerHTML = '';
                
                // 显示正在处理的提示
                transcriptContainer.innerHTML = '<div class="text-center text-gray-500 py-10"><i class="fas fa-spinner fa-spin text-3xl mb-3"></i><p>正在模拟问诊...</p></div>';
                
                // 逐条显示对话
                let index = 0;
                const interval = setInterval(() => {
                    if (index < mockDialog.length) {
                        // 添加对话到转录区域
                        addTranscriptEntry(mockDialog[index].speaker, mockDialog[index].text);
                        index++;
                    } else {
                        clearInterval(interval);
                        // 处理完成后进行分析
                        setTimeout(() => {
                            processConsultationData();
                        }, 1000);
                    }
                }, 1500);
            }
            
            // 添加转录条目
            function addTranscriptEntry(speaker, text) {
                // 移除提示信息（如果存在）
                if (transcriptContainer.querySelector('.text-center')) {
                    transcriptContainer.innerHTML = '';
                }
                
                // 创建新的转录条目
                const entryDiv = document.createElement('div');
                entryDiv.className = `transcript-entry ${speaker} p-3 mb-2 rounded`;
                entryDiv.innerHTML = `
                    <div class="flex justify-between items-center">
                        <span class="font-semibold">${speaker === 'doctor' ? '医生' : '患者'}</span>
                        <span class="text-xs text-gray-500">${new Date().toLocaleTimeString()}</span>
                    </div>
                    <p class="mt-1">${text}</p>
                `;
                transcriptContainer.appendChild(entryDiv);
                
                // 滚动到底部
                transcriptContainer.scrollTop = transcriptContainer.scrollHeight;
            }
            
            // 处理问诊数据并生成分析结果
            function processConsultationData() {
                // 显示处理中的提示
                transcriptContainer.innerHTML = '<div class="text-center text-gray-500 py-10"><i class="fas fa-cog fa-spin text-3xl mb-3"></i><p>正在分析问诊内容...</p></div>';
                
                // 模拟处理时间
                setTimeout(() => {
                    // 显示原始对话
                    transcriptContainer.innerHTML = '';
                    mockDialog.forEach(dialog => {
                        addTranscriptEntry(dialog.speaker, dialog.text);
                    });
                    
                    // 显示语音识别准确率
                    document.getElementById('accuracy-rate').textContent = '92%';
                    
                    // 生成关键信息提取
                    generateKeyInfo();
                    
                    // 生成AI分析
                    generateAIAnalysis();
                    
                    // 生成问诊记录
                    generateConsultationRecord();
                    
                    // 生成诊断建议
                    generateDiagnosisSuggestions();
                    
                    // 重新启用模拟按钮
                    simulateBtn.disabled = false;
                    simulateBtn.innerHTML = '<i class="fas fa-play mr-2"></i>模拟问诊';
                }, 2000);
            }
            
            // 生成关键信息提取
            function generateKeyInfo() {
                keyInfo.innerHTML = `
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <h3 class="font-semibold text-blue-800">主要症状</h3>
                        <p class="text-blue-600">头晕、恶心、耳鸣</p>
                    </div>
                    <div class="bg-green-50 p-3 rounded-lg">
                        <h3 class="font-semibold text-green-800">持续时间</h3>
                        <p class="text-green-600">约两周</p>
                    </div>
                    <div class="bg-purple-50 p-3 rounded-lg">
                        <h3 class="font-semibold text-purple-800">诱发因素</h3>
                        <p class="text-purple-600">熬夜、工作压力大</p>
                    </div>
                    <div class="bg-amber-50 p-3 rounded-lg">
                        <h3 class="font-semibold text-amber-800">其他症状</h3>
                        <p class="text-amber-600">右耳耳鸣</p>
                    </div>
                `;
            }
            
            // 生成AI分析
            function generateAIAnalysis() {
                aiAnalysis.innerHTML = `
                    <div class="ai-insight bg-purple-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-purple-800 flex items-center">
                            <i class="fas fa-brain mr-2"></i>AI智能分析结果
                        </h3>
                        <ul class="mt-2 space-y-2 text-purple-700">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle mt-1 mr-2 text-green-500"></i>
                                <span>症状符合神经性头晕特征</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-exclamation-triangle mt-1 mr-2 text-yellow-500"></i>
                                <span>需排除耳部疾病可能</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-info-circle mt-1 mr-2 text-blue-500"></i>
                                <span>与近期生活压力大有关联</span>
                            </li>
                        </ul>
                    </div>
                `;
            }
            
            // 生成问诊记录
            function generateConsultationRecord() {
                consultationRecord.innerHTML = `
                    <div class="border-b pb-3 mb-3">
                        <h3 class="font-semibold text-gray-800">患者基本信息</h3>
                        <p class="text-gray-600">姓名：张三 | 性别：男 | 年龄：35岁</p>
                    </div>
                    <div class="border-b pb-3 mb-3">
                        <h3 class="font-semibold text-gray-800">主诉</h3>
                        <p class="text-gray-600">反复头晕、恶心两周，伴右耳耳鸣</p>
                    </div>
                    <div class="border-b pb-3 mb-3">
                        <h3 class="font-semibold text-gray-800">现病史</h3>
                        <p class="text-gray-600">患者两周前无明显诱因出现头晕，伴有恶心，特别是晨起时症状明显。同时伴有右耳耳鸣。症状持续存在，工作压力大，经常熬夜。</p>
                    </div>
                    <div class="border-b pb-3 mb-3">
                        <h3 class="font-semibold text-gray-800">体格检查</h3>
                        <p class="text-gray-600">血压：135/85mmHg，其他体征待查</p>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">处理计划</h3>
                        <p class="text-gray-600">测量血压，安排相关检查</p>
                    </div>
                `;
            }
            
            // 生成诊断建议
            function generateDiagnosisSuggestions() {
                diagnosisSuggestions.innerHTML = `
                    <div class="diagnosis-suggestion bg-blue-50 p-4 rounded-lg mb-4">
                        <h3 class="font-semibold text-blue-800 flex items-center">
                            <i class="fas fa-diagnoses mr-2"></i>初步诊断
                        </h3>
                        <p class="mt-2 text-blue-700">神经性头晕可能性大</p>
                    </div>
                    <div class="diagnosis-suggestion bg-green-50 p-4 rounded-lg mb-4">
                        <h3 class="font-semibold text-green-800 flex items-center">
                            <i class="fas fa-procedures mr-2"></i>鉴别诊断
                        </h3>
                        <ul class="mt-2 space-y-1 text-green-700">
                            <li>• 梅尼埃病</li>
                            <li>• 良性阵发性位置性眩晕</li>
                            <li>• 颈椎病</li>
                        </ul>
                    </div>
                    <div class="diagnosis-suggestion bg-amber-50 p-4 rounded-lg mb-4">
                        <h3 class="font-semibold text-amber-800 flex items-center">
                            <i class="fas fa-vial mr-2"></i>建议检查
                        </h3>
                        <ul class="mt-2 space-y-1 text-amber-700">
                            <li>• 血常规</li>
                            <li>• 颈椎X线</li>
                            <li>• 听力检测</li>
                            <li>• 前庭功能检查</li>
                        </ul>
                    </div>
                    <div class="diagnosis-suggestion bg-purple-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-purple-800 flex items-center">
                            <i class="fas fa-prescription-bottle mr-2"></i>处理建议
                        </h3>
                        <ul class="mt-2 space-y-1 text-purple-700">
                            <li>• 改善生活方式，避免熬夜</li>
                            <li>• 适当减压，规律作息</li>
                            <li>• 必要时可给予对症治疗</li>
                        </ul>
                    </div>
                `;
            }
        });
    </script>
</body>
</html>
